<template>
  <div class="container_404">
    <div class="left animate__animated animate__fadeInLeft">
      <img src="@/assets/404.jpg" alt="" />
    </div>
    <div class="rigth animate__animated animate__fadeInRight">
      <div class="right_top">
        <div class="top_left">
          <p>404</p>
          <h1>{{$t('nonExistent.firstSo')}}</h1>
        </div>
        <div class="top_right">{{$t('nonExistent.sosorry')}}</div>
      </div>
      <p class="hint">{{$t('nonExistent.hint')}}</p>
      <p class="handler">{{$t('nonExistent.guide')}}<a href="/">{{$t('nonExistent.home')}}</a></p>
    </div>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.container_404 {
  background: #fbfcfe;
  .left {
    height: 100vh;
    width: auto;
    img {
      width: auto;
      height: 100%;
    }
  }
  div.rigth {
    position: absolute;
    right: 200px;
    top: 50%;
    transform: translateY(-50%);
    div.right_top {
      display: flex;
      align-items: flex-end;
      color: #000;
      div.top_left {
        margin-right: 10px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        p {
          margin-bottom: 0;
          line-height: 1;
          font-size: 40px;
          font-weight: bold;
        }

        h1 {
          margin: 0;
          font-size: 100px;
          font-weight: bold;
          line-height: 1.3;
        }
      }

      div.top_right {
        font-size: 160px;
        font-weight: bold;
        line-height: 1;
        margin: 0;
        letter-spacing: 10px;
      }
    }

    p.hint {
      font-size: 36px;
      font-weight: bold;
      color: #000;
      letter-spacing: 5px;
    }

    p.handler {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 5px;
      color: #000;
      line-height: 2;
      a {
        margin-left: 15px;
        font-weight: bold;
      }
    }
  }
}
</style>
